const input=document.querySelector('.input_txt')
const btn=document.querySelector('.input_sub')
const lists=document.querySelector('.talk_list')

const renderList = (a,b,c) => {
  const div = document.createElement('li')
  div.classList.add(a)
  div.innerHTML =`  
  <img src="img/person${b}.png" />
     <span>${c}</span>`
  lists.appendChild(div)
}

btn.addEventListener('click',async function () {
  const value = input.value.trim()
  if(!value) return alert('傻狗')
  renderList("right_word","02",value)
  input.value = ''
  resetui()
  const { data: res } = await axios.get('http://ajax-api.itheima.net/api/robot?spoken=' + value)
  const text=res.data.info.text
  renderList("left_word", "01", text)
})

input.addEventListener('keyup', function (e) {
  if (e.key === 'Enter') {
    btn.click()
  }
})
